<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)"/>
    <title>锅锅商城</title>
    <link rel="icon" type="image/x-icon" href="../img/火锅.png">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #img {
            width: 220px;
            height: 245px;
            border-right: rgb(223, 218, 218) 1px solid;
            margin-left: 20px;
        }

        #img2 {
            float: left;
            width: 200px;
            height: 200px;
        }

        #value1 {
            border: solid 0px red;
            width: 600px;
            height: 245px;
            margin-left: 50px;
        }

        #px {
            margin-left: 40px;
            background-color: rgb(201, 212, 228);
        }

        * {
            cursor: url(../img/火锅.ico), default;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body style="background-color: darkgray;">
<div id="app">

    <!-- 回到顶部 -->
    <template>
        <el-backtop></el-backtop>
    </template>

    <!-- 导航栏 -->
    <el-header style="height:145px;background-color: #F8F8F8;">
        <el-row>
            <el-col>
                <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         background-color="#F8F8F8">
                    <el-menu-item index="1" style="margin-left: 350px;padding: 0px;">
                        <img src="../img/定位.png" width="35"/>
                    </el-menu-item>
                    <el-menu-item index="2" style="padding:0px;margin: 0px 5px;">
                        <a href="/html/shouye.html" style="text-decoration: none"><span>锅锅商城</span></a>
                    </el-menu-item>
                    <!--                    <el-menu-item index="3" style="padding: 0px;margin-right: 20px;">-->
                    <!--                        <span>[切换]</span>-->
                    <!--                    </el-menu-item>-->


                    <el-menu-item index="4" style="color: red;"><a
                            :href="myUrl" style="text-decoration: none;">{{username}}</a></el-menu-item>
                    <el-menu-item index="5" v-if="!loginStatus"><a :href="myUrl" style="text-decoration: none;">免费注册</a></el-menu-item>
                    <el-menu-item index="5" v-if="loginStatus" @click="logout">退出</el-menu-item>

                    <el-submenu index="6">
                        <template slot="title">个人中心</template>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-1">我的订单</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-2">订单速查</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-3">我的收藏</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-4">我的评价</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-5">我的设置</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-6">会员中心</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-7">积分商城</el-menu-item>
                        </a>
                    </el-submenu>

                    <el-submenu index="7">
                        <template slot="title">商户服务</template>
                        <el-menu-item index="7-1">商户中心</el-menu-item>
                        <el-menu-item index="7-2">申请加盟</el-menu-item>
                        <el-menu-item index="7-3">店铺编辑</el-menu-item>
                        <el-menu-item index="7-4">菜单编辑</el-menu-item>
                        <el-menu-item index="7-5">销量查询</el-menu-item>
                        <el-menu-item index="7-6">我的设置</el-menu-item>
                    </el-submenu>
                    <el-submenu index="8">
                        <template slot="title">帮助中心</template>
                        <el-menu-item index="8-1">平台规则</el-menu-item>
                        <el-menu-item index="8-2">联系客服</el-menu-item>
                    </el-submenu>
                </el-menu>
                <div class="line"></div>
            </el-col>
        </el-row>
        <!-- 搜索框 -->
        <el-row>
            <el-col style="margin-left: 350px;" :span="1">
                <img src="../img/恐龙.png" width="50px"/>
            </el-col>
            <el-col :span="2">
                <div style="font-size:16px;color:black;line-height: 50px;">锅锅餐饮</div>
            </el-col>
            <el-col :span="6" :offset="0">
                <div style="margin-top: 1px;width:500px;line-height: 50px;">
                    <el-input placeholder="搜索商家或者地点" v-model="searchInput" class="input-with-select">
                        <el-select v-model="searchSelect" slot="prepend" placeholder="请选择"
                                   @change="MethodSearchSelectChange">
                            <el-option label="餐厅" value="1"></el-option>
                            <el-option label="地点" value="2"></el-option>
                            <el-option label="菜名" value="3"></el-option>
                            <el-option label="订单" value="4"></el-option>
                        </el-select>
                        <i slot="suffix" class="el-input__icon el-icon-circle-close"
                           @click="MethodClearSearchInput"></i>
                        <el-button slot="append" icon="el-icon-search" @click="MethodBeginSearch()"></el-button>
                    </el-input>
                </div>
            </el-col>
        </el-row>
        <!-- 搜索框下的-"搜索发现" -->
        <el-row>
            <el-col style="margin-left:540px;" :span="1">
                <span style="font-size: 12px;color:#999;">搜索发现：</span>
            </el-col>
            <el-col :span="0.1" v-for="i in searchReminderData" style="margin: 0px 5px;">
                <span style="font-size: 12px;color:#999;" @click="MethodSearchReminderClick(i)">{{i}}</span>
            </el-col>
        </el-row>
    </el-header>

    <div id="px">
        <el-button type="primary" plain @click="xlbtn" style="margin-left: 60px;">按销量排序</el-button>
        <el-button type="primary" plain @click="jgbtn">按价格排序</el-button>
    </div>
    <el-container style="background-color: white;margin-left: 40px;">
        <el-aside width="250px" style="background-color: white; margin-left: 40px;">
            <div v-for='(u,i) in menuimg' id="img">
                <div id="img2">
                    <img :src="menuimg[i]" width="200" height="200" id="i" style="border-radius:5px">

                </div>
            </div>
        </el-aside>
        <el-main style="background-color: white;">
            <div v-for='m in menu' id="value1">
                <div id="value2">
                    <!-- <img src="./商品介绍.png" width="35"/> -->
                    <hr>
                    <div><img src="../img/分类.png" width="30"/> 类型: {{m.type}} | {{m.menuName}}</div>
                    <div><img src="../img/价格.png" width="30"/> 价格: {{m.price}}</div>
                    <div><img src="../img/打折.png" width="35"/> 优惠折扣: {{m.discounts}} | 会员折上折: {{m.vipPrice}}</div>
                    <div><img src="../img/销量榜.png" width="30"/> 销量: {{m.saleNum}}</div>
                </div>
            </div>
            <el-pagination @current-change='handleJump' :current-page="currPage"
                           small layout="prev, pager, next" :total="total" :page-size="size"
                           style="margin-left: 400px;"></el-pagination>
        </el-main>
        <div style="width: 500px;">
            <el-main v-for='m in menu' style="background-color: white;">
                <div style="margin-top: 80px;height: 158px;">
                    <el-button @click="ckxq(m)">查看详情</el-button>
                </div>
            </el-main>
        </div>
        <div style="width: 20px;">
            <el-main style="background-color: rgb(211, 207, 207);" v-for='m in menu'>
                <div style="height: 238px;"></div>
            </el-main>
        </div>

    </el-container>

</div>

<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var v = new Vue({
        el: '#app',
        data: function () {
            return {
                menu: [],
                menuimg: [],
                total: 0,
                currPage: 1,
                size: 3,
                value: 0,
                searchWord: "",
                searchInput: "", //搜索输入框
                searchSelect: "",//搜索下拉框
                searchReminderData: ["金牌泰香米", "万州烤全鱼", "瓜西西火锅", "锅锅烤鸭", "五香串串"],
                myUrl: "/html/login.html",
                username: "你好，请登录",
                loginStatus: false
            }
        },
        methods: {
            ckxq: function (m) {
                //alert("开始传参");
                //this.m.splice(m,1);
                var id = m.menuId;
                //window.location.href = "/login?id=" + id;
                $.ajax({
                    url: "/querybuy",
                    type: "get",
                    dataType: "json",
                    data: {
                        "menuId": id
                    },
                    success: function (resp) {
                        if (resp.success) {

                            //  console.log(2222)
                            location.href = "/html/MenuManager.html";

                        } else {
                            th.$message.error('请求错误' + resp.message);
                        }
                    }
                });
            },
            handleJump: function (currentPage) {
                var _this = this;
                if (_this.value == 0) {
                    $.ajax({
                        url: '/getmenu2',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            name: _this.searchWord,
                            currPage: currentPage,
                        },
                        success: function (data) {
                            console.log(data.data);
                            _this.menu = data.data.records;
                            _this.total = data.data.total;
                        }
                    })
                    $.ajax({
                        url: '/getmenuimg2',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            name: _this.searchWord,
                            currPage: currentPage,
                        },
                        success: function (data) {
                            console.log(data.data.records)
                            _this.menuimg = data.data.records;

                        }
                    })
                } else if (_this.value == 1) {
                    $.ajax({
                        url: '/getmenubyxl2',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            name: _this.searchWord,
                            currPage: currentPage,
                        },
                        success: function (data) {
                            _this.menu = data.data.records;
                            //_this.total=data.data.total;
                        }
                    })
                    $.ajax({
                        url: '/getmenuimgbyxl2',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            name: _this.searchWord,
                            currPage: currentPage,
                        },
                        success: function (data) {
                            _this.menuimg = data.data.records;
                        }
                    })
                } else if (_this.value == 2) {
                    $.ajax({
                        url: '/getmenubyjg2',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            name: _this.searchWord,
                            currPage: currentPage,
                        },
                        success: function (data) {
                            _this.menu = data.data.records;
                            //_this.total=data.data.total;
                        }
                    })
                    $.ajax({
                        url: '/getmenuimgbyjg2',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            name: _this.searchWord,
                            currPage: currentPage,
                        },
                        success: function (data) {
                            _this.menuimg = data.data.records;
                        }
                    })
                }
            },
            xlbtn: function (currentPage) {
                var _this = this;
                _this.value = 1;
                alert(_this.value)
                $.ajax({
                    url: '/getmenubyxl2',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        name: _this.searchWord,
                        //currPage:currentPage,
                    },
                    success: function (data) {
                        _this.menu = data.data.records;
                        //_this.total=data.data.total;
                    }
                })
                $.ajax({
                    url: '/getmenuimgbyxl2',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        name: _this.searchWord,
                        //currPage:currentPage,
                    },
                    success: function (data) {
                        _this.menuimg = data.data.records;
                    }
                })
            },
            jgbtn: function () {
                var _this = this;
                _this.value = 2;
                $.ajax({
                    url: '/getmenubyjg2',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        name: _this.searchWord,
                        //currPage:currentPage,
                    },
                    success: function (data) {
                        _this.menu = data.data.records;
                        //_this.total=data.data.total;
                    }
                })
                $.ajax({
                    url: '/getmenuimgbyjg2',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        name: _this.searchWord,
                        //currPage:currentPage,
                    },
                    success: function (data) {
                        _this.menuimg = data.data.records;
                    }
                })
            },
            handleSelect(key, keyPath) {    //顶部菜单激活信息回调
                console.log(key, keyPath);
            },
            MethodSearchSelectChange() { //输入下拉框改变触发事件

            },
            MethodSearchReminderClick(i) {   //搜索框下方字体点击
                this.searchInput = i;
            },
            MethodClearSearchInput() {   //叉叉按钮点击事件-清空搜索框里的文字
                this.searchInput = "";
            },
            MethodBeginSearch() {        //点击搜索图标按钮-开始搜索
                var message = this.searchInput;
                var type = this.searchSelect;
                var _this = this;
                if (message == "") {
                    _this.$message({
                        showClose: true,
                        message: "请输入内容再搜索",
                        type: 'warning',
                        duration: 1500
                    });
                } else {
                    //request search
                    var _this = this;
                    axios.get('/getSearchResult', {
                        params: {
                            message: message,
                            type: type,
                        }
                    })
                        .then(function (resp) {
                            console.log(resp);
                            // if (resp.data.success) {
                            //     let data = resp.data.data;
                            //     _this.tableData = data.content;
                            //     _this.total = data.total;
                            //     _this.currPage = data.currPage;
                            //     location.href = "/html/search.html";
                            if (resp.data.success) {
                                location.href = "/html/search.html";
                            } else {
                                _this.$message.error('请求错误' + resp.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            checkLoginStatus() {
                let that = this;
                $.ajax({
                    url: "/checkLoginStatus",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            that.loginStatus = true;
                            that.myUrl = "/html/guoguolog.html";
                            that.username = resp.data.username;
                        }
                    }
                });
            },
            logout() {
                $.ajax({
                    url: "/logout",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            location.href = "/html/shouye.html";
                        }
                    }
                });
            }
        },
        mounted: function () {
            var _this = this;
            this.checkLoginStatus();
            $.ajax({
                url: '/getSearchWord',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    console.log("搜索参数chuanguolai：" + data.data);
                    if (data.success) {
                        _this.searchWord = data.data;
                        console.log("搜索参数：" + _this.searchWord);
                        $.ajax({
                            url: '/getmenu2',
                            type: 'get',
                            dataType: 'json',
                            data: {
                                name: _this.searchWord,
                            },
                            success: function (data) {
                                console.log(data.data);
                                _this.menu = data.data.records;
                                _this.total = data.data.total;
                            }
                        });
                        $.ajax({
                            url: '/getmenuimg2',
                            type: 'get',
                            dataType: 'json',
                            data: {
                                name: _this.searchWord,
                            },
                            success: function (data) {
                                console.log(data.data.records)
                                _this.menuimg = data.data.records;

                            }
                        });
                    } else {
                        location.href = "/html/shouye.html";
                    }
                }
            });
        }

    });
</script>
<script type="text/javascript">

    !function (e, t, a) {
        function r() {
            for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
            requestAnimationFrame(r)
        }

        function n() {
            var t = "function" == typeof e.onclick && e.onclick;
            e.onclick = function (e) {
                t && t(), o(e)
            }
        }

        function o(e) {
            var a = t.createElement("div");
            a.className = "heart", s.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }), t.body.appendChild(a)
        }

        function i(e) {
            var a = t.createElement("style");
            a.type = "text/css";
            try {
                a.appendChild(t.createTextNode(e))
            } catch (t) {
                a.styleSheet.cssText = e
            }
            t.getElementsByTagName("head")[0].appendChild(a)
        }

        function c() {
            return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        }

        var s = [];
        e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
            setTimeout(e, 1e3 / 60)
        }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()
    }(window, document);

</script>
<script>

</script>

</body>
</html>